import { useTheme } from "@emotion/react";
import Paper from "@mui/material/Paper";
import type { FC, HTMLProps, ReactNode } from "react";

export interface ChartSectionProps {
	/**
	 * action appears in the top right of the section card
	 */
	action?: ReactNode;
	children?: ReactNode;
	contentsProps?: HTMLProps<HTMLDivElement>;
	title?: string | JSX.Element;
}

export const ChartSection: FC<ChartSectionProps> = ({
	action,
	children,
	contentsProps,
	title,
}) => {
	const theme = useTheme();

	return (
		<Paper
			css={{
				border: `1px solid ${theme.palette.divider}`,
				borderRadius: 8,
			}}
			elevation={0}
		>
			{title && (
				<div
					css={{
						alignItems: "center",
						display: "flex",
						justifyContent: "space-between",
						padding: "12px 16px",
					}}
				>
					<h6
						css={{
							margin: 0,
							fontSize: 14,
							fontWeight: 600,
						}}
					>
						{title}
					</h6>
					{action && <div>{action}</div>}
				</div>
			)}

			<div {...contentsProps} css={{ margin: 16 }}>
				{children}
			</div>
		</Paper>
	);
};
